<!-- 左侧菜单 -->

<template>
  <div class="container-top">
    <el-menu :default-active="activeIndex" style="border-right-width:0" class="el-menu-demo" mode="vertical"
      background-color="#0d2943" text-color="#A6ABB2" active-text-color="#ffffff" @select="handleSelect">

      <!-- 菜单项1：数据采集 -->
      <el-sub-menu index="1">
        <template #title>
          <img src="@/assets/images/数据采集.png" style="margin-right: 10px;">
          数据采集
        </template>
        <el-menu-item index="1-1">
          <span style="margin-left: -5px;">数据源管理</span>
        </el-menu-item>
        <el-menu-item index="1-2"> <span style="margin-left: -5px;">数据源探查</span>

        </el-menu-item>
        <el-menu-item index="1-3"> <span style="margin-left: -5px;">离线采集</span>

        </el-menu-item>
      </el-sub-menu>

      <!-- 菜单项2：数据开发 -->
      <el-sub-menu index="2">
        <template #title>
          <img src="@/assets/images/数据开发.png" style="margin-right: 10px;">
          数据开发
        </template>
        <el-menu-item index="2-1"> <span style="margin-left: -5px;">数仓开发</span>
        </el-menu-item>
        <el-menu-item index="2-2"> <span style="margin-left: -5px;">资源管理</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 菜单项3：数据推送 -->
      <el-sub-menu index="3">
        <template #title>
          <img src="@/assets/images/数据推送.png" style="margin-right: 10px;">
          数据推送
        </template>
        <el-menu-item index="3-1"> <span style="margin-left: -5px;">数据推送</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 菜单项4：作业管理 -->
      <el-sub-menu index="4">
        <template #title>
          <img src="@/assets/images/作业管理.png" style="margin-right: 10px;">
          作业管理
        </template>
        <el-menu-item index="4-1"> <span style="margin-left: -5px;">作业管理</span>
        </el-menu-item>
        <el-menu-item index="4-2"> <span style="margin-left: -5px;">作业监控</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>

  <!-- 底部面板侧收按钮 -->
  <div style="height: 40px; background-color:#153049;">
    <img src="@/assets/images/收起.png" class="collapse">
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 左侧菜单
const activeIndex = ref('1-1')
const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
</script>

<style scoped>
.container-top {
  height: calc(100% - 40px);
  background-color: #0d2943;
}

:deep(.el-sub-menu__title) {
  height: 45px;
}

:deep(.el-sub-menu__title):hover {
  background-color: #0d2943;
  color: #ffffff !important;

}

.el-menu-item {
  border-radius: 17px 0px 0px 17px;
  margin-left: 10px;
  height: 35px !important;
}

.el-menu-item:hover {
  background-color: #263F56 !important;
  color: #ffffff !important;
}

.el-menu-item.is-active {
  background-color: #263F56 !important;
}

.collapse {
  height: 15px;
  width: 16px;
  margin-left: 82px;
  margin-top: 13px;
  opacity: 0.5;
}

.collapse:hover {
  opacity: 1;
}
</style>